﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            height: 100px;
        }
        div a {
            height: 100%;
            float: left;
            margin: 0 10px;
        }
        div a img {
            height: 100%;
            float: left;
        }
        .beauty {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h2>美女相册</h2>
    <div>
        <a href="#">
            <img src="../css/image/79ba98972e4154bd4986a4821f6a84d9.jpg" alt="Alternate Text" />
        </a>
        <a href="#">
            <img src="../css/image/775eeda1bbaf7e4b5bb59343cb03dd94.jpg" alt="Alternate Text" />
        </a>
        <a href="#">
            <img src="../css/image/176822793b9e996e73a1f812352d0bfc.jpg" alt="Alternate Text" />
        </a>
        <a href="#">
            <img src="../css/image/e7d7b59bde2a6ce4cb5990b6a288e2d6.jpg" alt="Alternate Text" />
        </a>
    </div>
    <img src="../css/image/79ba98972e4154bd4986a4821f6a84d9.jpg" alt="Alternate Text" class="beauty"/>
    <script>
        a_list = document.querySelectorAll('div a');
        beauty = document.querySelector('.beauty');
        for (var i = 0; i < a_list.length; ++i) {
            a = a_list[i];
            a.onclick = function () {
                img = this.querySelector('img');
                beauty.src = img.src
                return false;
            }
        }
    </script>
</body>
</html>